<template>
  <view>
    <!-- 示例1：使用容器类 -->
    <view class="mo-container">
      <view class="example-section">
        <text class="section-title">容器示例</text>
        <text class="section-desc">这个容器会根据屏幕宽度自动调整最大宽度</text>
      </view>
    </view>

    <!-- 示例2：手机模拟容器 - 在桌面端限制宽度为手机大小 -->
    <view class="mo-mobile-container">
      <view class="example-section">
        <text class="section-title">手机模拟容器</text>
        <text class="section-desc">在桌面端，这个容器的宽度固定为手机宽度</text>
      </view>
    </view>

    <!-- 示例3：栅格系统 -->
    <view class="mo-container">
      <view class="mo-row">
        <view class="mo-col mo-col-12 mo-col-md-6 mo-col-lg-4">
          <view class="grid-example">
            <text>列 1</text>
          </view>
        </view>
        <view class="mo-col mo-col-12 mo-col-md-6 mo-col-lg-4">
          <view class="grid-example">
            <text>列 2</text>
          </view>
        </view>
        <view class="mo-col mo-col-12 mo-col-md-6 mo-col-lg-4">
          <view class="grid-example">
            <text>列 3</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 示例4：响应式图片 -->
    <view class="mo-container">
      <view class="example-section">
        <text class="section-title">响应式图片</text>
        <image class="mo-img-fluid" src="/static/example-image.png" mode="widthFix"></image>
      </view>
    </view>

    <!-- 示例5：卡片容器 -->
    <view class="mo-card-container">
      <view class="example-card">
        <text class="card-title">卡片标题</text>
        <text class="card-text">这个卡片在桌面端会限制宽度，避免过度拉伸</text>
      </view>
    </view>

    <!-- 示例6：响应式显示/隐藏 -->
    <view class="mo-container">
      <view class="mo-show-xs mo-hide-md">
        <text>只在小屏幕上显示（小于768px）</text>
      </view>
      <view class="mo-hide-xs mo-show-md">
        <text>只在中等及以上屏幕显示（大于等于768px）</text>
      </view>
    </view>
  </view>
</template>

<script setup>
// 示例组件
</script>

<style lang="scss">
.example-section {
  padding: 15px;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 8px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  display: block;
  margin-bottom: 10px;
}

.section-desc {
  font-size: 14px;
  color: #666;
}

.grid-example {
  background-color: var(--td-brand-color-2);
  padding: 15px;
  text-align: center;
  margin-bottom: 15px;
  border-radius: 4px;
}

.example-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  display: block;
  margin-bottom: 10px;
}

.card-text {
  font-size: 14px;
  color: #666;
}
</style> 